<template>
  <view class="container">
    <float-button name="bmi" />
    <uni-table border emptyText="暂无更多数据">
      <uni-tr>
        <uni-th align="center">BMI</uni-th>
        <uni-th align="center">身体状态类别</uni-th>
      </uni-tr>
      <uni-tr width="50">
        <uni-td align="center">18.5以下</uni-td>
        <uni-td align="center">体重过轻</uni-td>
      </uni-tr>
      <uni-tr>
        <uni-td align="center">18.5-23.9</uni-td>
        <uni-td align="center">正常范围</uni-td>
      </uni-tr>
      <uni-tr>
        <uni-td align="center">24-27.9</uni-td>
        <uni-td align="center">超重</uni-td>
      </uni-tr>
      <uni-tr>
        <uni-td align="center">27.9以上</uni-td>
        <uni-td align="center">肥胖</uni-td>
      </uni-tr>
    </uni-table>
    <uni-forms
      ref="valiForm"
      :rules="rules"
      v-model="formData"
      label-position="left"
      label-width="150"
      err-show-type="toast"
    >
      <uni-forms-item label="身高(cm)" required name="height">
        <uni-number-box
          :width="150"
          :max="10000"
          :step="0.1"
          :min="1"
          v-model="formData.height"
        />
      </uni-forms-item>
      <uni-forms-item label="体重(kg)" required name="weight">
        <uni-number-box
          :width="150"
          :max="10000"
          :step="0.1"
          :min="1"
          v-model="formData.weight"
        />
      </uni-forms-item>
    </uni-forms>
    <view class="btnBox">
      <button class="btn" type="primary" @click="onSubmit('valiForm')">
        计算
      </button>
    </view>
    <view class="box">
      <view class="infoBox">
        <view class="item">
          <text class="name">身体质量指数</text>
          <text class="val">{{ formData?.bmi }}</text>
        </view>
        <view class="item">
          <text class="name">身体状态类别</text>
          <text class="val">{{ formData?.category }}</text>
        </view>
        <view class="item">
          <text class="name">标准体重区间</text>
          <text class="val">{{ formData?.standardWeight }}</text>
        </view>
        <view class="item">
          <text class="name">目标</text>
          <text class="val">{{ formData?.target }}</text>
        </view>
        <view class="item">
          <text class="name small">建议</text>
          <view class="item-content" v-if="formData.bmi">
            <br />
            <view class="noRight">
              <text class="name">1.运动</text>
              <br />
              <view class="value" v-for="(v, i) in formData?.sport" :key="i">
                <text>
                  {{ v }}
                </text>
              </view>
            </view>
            <view class="br-v" />
            <view class="noRight">
              <text class="name">2.饮食</text>
              <br />
              <view class="value" v-for="(v, i) in formData?.eat" :key="i">
                <text>
                  {{ v }}
                </text>
              </view>
            </view>
            <view class="br-v" />
            <view class="noRight">
              <text class="name">3.休息</text>
              <br />
              <view class="value" v-for="(v, i) in formData?.rest" :key="i"
                ><text>
                  {{ v }}
                </text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { bmiRecord } from '@/api/repast';
export default {
  components: {},
  data() {
    return {
      // 表单类型
      formData: { height: NaN, weight: NaN },
      // 规则
      rules: {
        height: {
          rules: [
            {
              required: true,
              errorMessage: '请输入身高',
            },
          ],
        },
        weight: {
          rules: [
            {
              required: true,
              errorMessage: '请输入体重',
            },
          ],
        },
      },
    };
  },
  onLoad(query) {},
  methods: {
    // 提交
    onSubmit(ref) {
      this.$refs[ref]
        .validate()
        .then((res) => {
          console.log(res);
          let bmi;
          let o = {};
          let h = res.height / 100;
          bmi = (res.weight / (h * h)).toFixed(1);
          if (bmi < 18.5) {
            o = {
              category: '体重过轻',
              categoryId: '1',
              target: '健康增重，增加肌肉而非单纯脂肪。',
              sport: [
                '抗阻训练为主：每周进行3-4次力量训练（如深蹲、俯卧撑、哑铃），每次20-30分钟，促进肌肉增长。',
                '适度有氧运动：避免过量有氧消耗热量，可选择散步或瑜伽，每周不超过150分钟。',
              ],
              eat: [
                '增加热量摄入：每日热量需高于基础代谢，可增加坚果、牛油果、全脂乳制品等健康高热量食物。',
                '高蛋白饮食：每日摄入1.2-1.5g/kg体重的蛋白质（如鸡蛋、鱼、瘦肉、豆类），均匀分配至三餐',
              ],
              rest: [
                '保证充足睡眠：每日7-8小时，避免熬夜，睡眠不足会抑制肌肉合成。',
                '避免压力性节食：规律进餐，避免因压力或焦虑减少进食。',
              ],
            };
          } else if (bmi >= 18.5 && bmi <= 23.9) {
            o = {
              category: '正常范围',
              categoryId: '2',
              target: '维持健康体重，优化体成分（肌肉与脂肪比例）。',
              sport: [
                '有氧与力量结合：每周150分钟中等强度有氧（如快走、游泳） + 2次抗阻训练，提升代谢率。',
                '日常活动：多步行、爬楼梯，减少久坐，每小时起身活动5分钟。',
              ],
              eat: [
                '均衡膳食：以全谷物为主（如糙米、燕麦），蔬菜每日500g，低脂优质蛋白（鱼、鸡胸肉）占15%-20%热量。',
                '控制油盐糖：每日盐≤5g、油20-25g、添加糖≤25g，避免隐形热量（如含糖饮料）。',
              ],
              rest: [
                '规律作息：固定睡眠时间，避免熬夜导致代谢紊乱。',
                '监测体成分：即使BMI正常，若体脂率超标（男>20%，女>30%），需调整运动饮食。',
              ],
            };
          } else if (bmi >= 24 && bmi <= 27.9) {
            o = {
              category: '超重',
              categoryId: '3',
              target: '减脂为主，避免肌肉流失。',
              sport: [
                '中低强度有氧：每周300分钟（如快走、骑行），结合抗阻训练2-3次/周，维持肌肉量。',
                '碎片化运动：每小时起身活动3-5分钟，减少久坐。',
              ],
              eat: [
                '限能量平衡膳食：每日减少500-750千卡，男性摄入1200-1500千卡，女性1000-1200千卡。',
                '调整进餐顺序：先吃蔬菜，再吃蛋白质，最后主食，减少碳水过量摄入。',
              ],
              rest: [
                '保证睡眠质量：睡眠不足易引发饥饿素升高，建议23点前入睡。',
                '避免压力进食：通过冥想或轻度运动缓解压力，减少情绪化饮食。',
              ],
            };
          } else {
            o = {
              category: '肥胖',
              categoryId: '4',
              target: '科学减重，改善代谢健康。',
              sport: [
                '循序渐进增加强度：从每日30分钟快走开始，逐步过渡到游泳、椭圆机等低冲击运动，避免关节损伤4。',
                '结合抗阻训练：每周2-3次，防止减重期肌肉流失。',
              ],
              eat: [
                '低GI饮食：选择升糖指数低的食物（如糙米、藜麦），减少精制碳水（白米饭、甜点）。',
                '严格控酒：酒精热量高（7千卡/g），且抑制脂肪代谢。',
              ],
              rest: [
                '规律作息与监测：每日记录体重及饮食，定期体检（如血糖、血脂）。',
                '专业干预：若生活方式调整无效，需就医评估药物或手术干预。',
              ],
            };
          }
          this.formData.bmi = bmi;
          this.formData.category = o.categoryId;
          this.formData.standardWeight =
            (18.5 * h * h).toFixed(1) +
            '-' +
            (23.9 * h * h).toFixed(1) +
            ' (公斤)';
          this.formData = { ...this.formData, ...o };
          console.log(this.formData);
          // 提交接口
          let obj = { ...this.formData, category: o.categoryId };
          bmiRecord(obj)
            .then(() => {})
            .catch((err) => {});
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  min-height: calc(100vh - var(--window-bottom) - 200rpx);
  padding: 20rpx;
  background: linear-gradient(180deg, #d7e4fd 0%, #fff 50%);
  background-repeat: no-repeat;
  background-size: 100% auto;
  position: relative;
  ::v-deep .uni-forms {
    margin-top: 40rpx;
    padding-left: 20rpx;
    .uni-forms-item__content {
      display: flex;
      justify-content: end;
      align-self: center;
    }
  }
  .btnBox {
    .btn {
      width: 100%;
      height: 80rpx;
      font-size: 40rpx;
      color: #ffffff;
      line-height: 92rpx;
      background: #3681ff;
    }
  }
  .box {
    margin: 50rpx 0;
    padding: 30rpx 35rpx 30rpx 20rpx;
    background: #ffffff;
    border-radius: 12rpx;
    box-shadow: 0 0 30rpx 0 #ccc;
    .mainBox {
      text-align: center;
      padding: 40rpx 0;
      line-height: 1;

      .id {
        font-size: 38rpx;
        font-weight: bold;
        color: #4288ff;
        padding-bottom: 40rpx;
      }

      .val {
        font-size: 40rpx;
        font-weight: 800;
        color: #ff884d;
        padding-bottom: 27rpx;

        text {
          font-size: 30rpx;
          margin-left: 10rpx;
        }
      }

      .status {
        font-size: 26rpx;
        font-weight: 500;
        color: #555555;
      }
    }
    .infoBox {
      .br-v {
        height: 10rpx;
      }
      .item {
        font-size: 30rpx;
        font-weight: 500;
        padding: 22rpx 12rpx;
        display: flex;
        justify-content: space-between;
        border-bottom: 2rpx solid #eaeaea;
        &:last-child {
          border-bottom: 0;
        }
        .name {
          color: #989898;
          white-space: nowrap;
        }

        .val {
          color: #333;
          text-align: justify;
          word-break: break-all;
        }
        .noRight {
          text-align: left;
          letter-spacing: 2rpx;
          .value {
            text-indent: 45rpx;
            position: relative;
            &::before {
              content: '';
              position: absolute;
              left: 12rpx;
              top: 14rpx;
              display: inline-block;
              width: 12rpx;
              height: 12rpx;
              margin-right: 6rpx;
              background: #ffb93b;
              border-radius: 50%;
            }
          }
        }
        .value {
          color: #333;
          text-align: justify;
        }
        .item-content {
          display: flex;
          flex-direction: column;
          // justify-content: space-between;
        }
      }
    }
  }
  .myLabel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .star {
      color: #dd524d;
    }
  }
}
</style>
